<template>
	<view :id="config.id" :style="{width:config.width,height:config.height}" :option="option" :config="config"
	 :change:config="handleConfigChange" :change:option="handleOptionChange">
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
				default: () => {
					return {
					  id: "myCharts",
					  width: "100%",
					  height: "150px"
					}
				 }
			},
			option: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {}
		},
		methods:{
			handleClickItem(e){
				this.$emit("handleClickItem",e)
			}
		}
	}
</script>


<script module="echarts" lang="renderjs" type="module">
	let myCharts = null
	import echartsTheme from "@/common/wonderland.json"
	export default {
		data(){
			return {
				myCharts:null
			}
		},
		mounted() {
			if(typeof window.echarts === 'function'){
				this.initCharts()
			}else{
				let script = document.createElement("script")
				script.src = "static/echarts.js"
				// script.src = 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js' 
				script.onload = this.initCharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			handleOptionChange(newVal,oldVal,ownerInstance,instance){
				// console.log(this.myCharts._dom.id)
				this.myCharts.setOption(newVal)
			},
			handleConfigChange(newVal,oldVal,ownerInstance,instance){},
			initCharts(){
				echarts.registerTheme('echartsTheme', echartsTheme)
				this.myCharts = echarts.init(document.getElementById(this.config.id),'echartsTheme')
				// this.myCharts.clear()
				this.myCharts.off('click')
				this.myCharts.on('click', params => { 
					if(params.componentType==='markLine'){
						return
					}
					// console.log(params)
					this.$ownerInstance.callMethod("handleClickItem",{
							data:params.data,
							dataIndex:params.dataIndex,
							dataType:params.dataType,
							value:params.value,
							type:params.type,
							seriesType:params.seriesType,
						},
					)
				})
				this.myCharts.setOption(this.option)
			}
		}
	}
</script>
